<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>添加联系人</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="../css/my-app.css">
    <link rel="stylesheet" href="../css/ekang.css"/>
    <style type="text/css">
        li {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            background-color: #fff;
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            list-style-type: none;
        }

        .li-title {
            position: absolute;
            color: #333333;
            font-size: 15px;
            left: 12px;
            line-height: 50px;
            font-weight: bold;
        }

        ::-webkit-input-placeholder { color: #999999; }
        input:-moz-placeholder { color: #999999; }

        .li-text {
            position: absolute;
            color: #808080;
            border: none;
            outline: none;
            font-size: 15px;
            line-height: 45px;
            right: 0;
            width: 60%;
            text-align: right;
            background-color: rgba(102, 102, 102, 0);
        }

        .confirmAdd {
            margin: 25px auto;
            width: 100%;
            height: 36px;
            background-color: #439d80;
            font-size: 16px;
            color: #fff;
            border: none;
            outline: none;
        }

        .icon-right {
            background: url(../img/right_24.png) no-repeat right center transparent;
            background-size: 12px 12px;
        }

        .tabs-choose {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            height: 30px;
            line-height: 30px;
            padding:  5px;
            position: fixed;
            background-color: #fff;
            margin-top: 5px;
            width: 10%;
            right: 10px;
            color: #808080;
        }

        .tabs-choose div {
            display: flex;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background-origin: content-box;
            padding: 0 10px;
            width: 33%;
            font-size: 14px;
            text-align: right;
        }
    </style>
</head>
<body>

<div class="views tabs toolbar-through">
    <!--导航条-->
    <!-- Second view (for second wrap)-->
    <div id="view" class="view view-main tab active">
        <!-- We can make with view with navigation, let's add Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner" style="background-color: #38a16d">
                <div class="left" id="back">
                    <a href="#" class="back link">
                        <i class="icon icon-back color-white" style="color: white"></i>
                        <span style="color: white">返回</span>
                    </a>
                </div>
                <div class="center sliding" style="color: white">添加家庭联系人</div>
            </div>
        </div>

        <div class="pages navbar-through">
            <div data-page="index-2" class="page page-on-center">
                <div class="page-content">
                    <div style="position: relative;text-align: center">
                        <ui>
                            <li style="margin-top: 0;border-top: none">
                                <span class="li-title">真实姓名</span>
                                <input type="text" id="user_name" placeholder="输入家庭联系人姓名" class="li-text" style="right: 10px"/>
                            </li>
                            <li>
                                <span class="li-title">身份证号</span>
                                <input type="number" id="identify_card" placeholder="输入家庭联系人身份证" class="li-text"/>
                            </li>
                            <li>
                                <span class="li-title">性别</span>
                                <div id="choosesex" class="icon-right tabs-choose text-center">性别</div>
                            </li>
                            <li>
                                <span class="li-title">联系方式</span>
                                <input type="number" id="mobile" placeholder="输入家庭联系人手机号码" class="li-text"/>
                            </li>
                        </ui>

                        <button class="confirmAdd" id="confirm">确认添加</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/ekang.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script>
    $(function(){
        var sex_type;
        var app = {
            //添加银行卡号
            addPeople: function () {
                $.ajax({
                    type: 'GET',
                    url: textUrl+'user/operatorUserFamily',
                    data: {         // 需要于客户端同步
                        user_name: $('#user_name').val(),        // 用户名
                        identity_card: $('#identify_card').val(),      // 身份证
                        mobile:$('#mobile').val(),              // 手机号
                        operator: "add",
                        uid:$.cookie("local_userId"),
                        sex:sex_type
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {

                            history.go(-1);
                            history.back();
                        }else{
                            alert(result.msg);
                        }
                    }
                });
            },

        };

        var myApp = new Framework7();

        var $$ = Dom7;

        $$('#choosesex').on('click', function () {
            var buttons = [
                {
                    text: '男',
                    bold: true,
                    onClick: function () {
                        $('#choosesex').html("男");
                        sex_type = 1;
                    }
                },
                {
                    text: '女',
                    onClick: function () {
                        $('#choosesex').html("女");
                        sex_type = 0;
                    }
                },
                {
                    text: '取消',
                    color: 'red'
                },
            ];
            myApp.actions(buttons);

        });


        $('#confirm').on('click', function () {
            if($('#user_name').val() == ""){
                alert("请输入联系人姓名");
                return;
            }else if($('#identify_card').val() == ""){
                alert("请输入联系人身份证号");
                return;
            }else if($('#mobile').val() == ""){
                alert("请输入联系人手机号");
                return;
            }else if($('#choosesex').text() == "性别"){
                alert("请选择性别");
                return;
            }
            // 用正则验证身份账号
            if(!/^\d{17}(\d|x)$/i.test($('#identify_card').val())){
                alert("你输入的身份证长度或格式错误");
                return;
            }
            var identify = $('#identify_card').val().replace(/x$/i,"a");

            sBirthday=identify.substr(6,4)+"-"+Number(identify.substr(10,2))+"-"+Number(identify.substr(12,2));
            var d=new Date(sBirthday.replace(/-/g,"/")) ;
            if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){
                alert("身份证上的出生日期非法");
                return ;
            }
            var iSum=0;
            for(var i = 17;i>=0;i --) {
                iSum += (Math.pow(2,i) % 11) * parseInt(identify.charAt(17 - i),11) ;
            }
            if(iSum%11!=1){
                alert("你输入的身份证号非法");
                return ;
            }

            if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('#mobile').val()))){
                alert("请输入正确的手机号");
                document.mobileform.mobile.focus();
                return false;
            }

            app.addPeople();

        });
        $('#back').click(function () {
            history.back();
        });
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="../js/weixin2.js"></script>
</body>
</html>